import React, {useState} from 'react';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    SettingOutlined,
    FundProjectionScreenOutlined,
    TeamOutlined,
    CreditCardOutlined,
    CaretDownOutlined,
    HomeOutlined,
    ExclamationCircleOutlined
} from '@ant-design/icons';
import RouterView from "@/router/childRoute"


import {Layout, Menu, Button, theme, Badge, Avatar, Dropdown, Space, Breadcrumb, MenuProps,Modal} from 'antd';
import "./home.less"
import {Link,useHistory} from 'react-router-dom';
import {clearStore} from "@/plugins/cache";

const {Header, Sider, Content} = Layout;


const items: MenuProps['items'] = [
    {
        label: '修改资料',
        key: '1',
    },
    {
        label: '修改密码',
        key: '2',
    },
    {
        label: '退出登录',
        key: '3',
    },
];

function itemRender(currentRoute: any, params: any, items: any, paths: any) {
    const isLink: boolean = currentRoute?.path;
    // console.log(isLink)
    // console.log(currentRoute, params, items, paths)
    return isLink ? (
        <Link to={`${isLink}`}>{currentRoute.title}</Link>
    ) : (
        <span>{currentRoute.title}</span>
    )
}


const App: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: {colorBgContainer, borderRadiusLG},
    } = theme.useToken();
    const history = useHistory();
    const [modal, contextHolder] = Modal.useModal();

    const onClick: MenuProps['onClick'] = ({key}) => {
        console.info(`Click on item ${key}`);
        switch (key) {
            case '3':
                console.log("退出登录")
                modal.confirm({
                    title: '警告',
                    icon: <ExclamationCircleOutlined />,
                    content: '是否清空所有数据并退出系统？',
                    okText: '确认',
                    cancelText: '取消',
                    okType: 'danger',
                    onOk:()=>{
                        clearStore();
                        history.replace("/login")
                    }
                });
                break;
        }
    };

    return (
        <Layout style={{height: '100vh'}}>
            {contextHolder}
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className="demo-logo-vertical"/>
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    items={[
                        {
                            key: '1',
                            icon: <FundProjectionScreenOutlined />,
                            label: '控制中心',
                        },
                        {
                            key: '2',
                            icon: <CreditCardOutlined />,
                            label: '管理中心',
                            children: [
                                {
                                    key: '2-1',
                                    icon: <TeamOutlined />,
                                    label: '用户管理',
                                },
                            ]
                        },
                        {
                            key: '3',
                            icon: <SettingOutlined />,
                            label: '网站设置',
                        },
                    ]}
                />
            </Sider>
            <Layout>
                <Header style={{padding: 0, background: colorBgContainer, display: 'flex'}}>
                    <Button
                        type="text"
                        icon={collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}
                        onClick={() => setCollapsed(!collapsed)}
                        style={{
                            fontSize: '16px',
                            width: 64,
                            height: 64,
                        }}
                    />
                    <h3 className="mainTitle">小洲博客终端管理系统</h3>
                    <div className="mainUtils">
                        <Badge count={1}>
                            <Avatar shape="square"
                                    src="http://thirdqq.qlogo.cn/g?b=oidb&k=DZwibiaTGAQBfRR6G5bxu1qQ&s=100&t=1611809426"/>
                        </Badge>
                        <Dropdown menu={{items, onClick}}>
                            <Button type="text" style={{marginLeft: "20px"}}>
                                <Space>
                                    设置
                                    <CaretDownOutlined />
                                </Space>
                            </Button>
                        </Dropdown>
                    </div>
                </Header>
                <Breadcrumb
                    style={{
                        padding: 24,
                    }}
                    separator=">"
                    itemRender={itemRender}
                    items={[
                        {
                            title: <HomeOutlined/>,
                            path: "/home"
                        },
                        {
                            title: "文章管理",
                            path: "/home/active"
                        }
                    ]}
                />
                <Content
                    id="content"
                    style={{
                        margin: '0 16px 16px',
                        overflow: 'auto',
                        borderRadius: borderRadiusLG,
                    }}
                >
                    <RouterView></RouterView>
                </Content>
            </Layout>
        </Layout>
    );
};

export default App;
